<template>
  <!--轮播图-->

  <div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img class="imgs1" :src="image"/>
      </van-swipe-item>
    </van-swipe>
  </div>

  <!--快速导航-->
<!--  <div style="padding: 13px">-->
  <div>
    <van-grid gutter="10" clickable :column-num="4">
      <van-grid-item icon="https://imgnew.zhichikeji.com/zcimgdir/album/file_60effeba759fe.png" text="美食" to="/foodView"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd2659bd42a5.png" text="旅游景点" to="/hotel"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd2659b0c72b.png" text="民宿" to="/sight"/>
      <van-grid-item icon="https://imgnew.zhichikeji.com/zcimgdir/album/file_60effebb41f4a.png" text="休闲娱乐" to="/play"
                     url="https://github.com"/>
    </van-grid>
  </div>
  <div>
    <van-grid gutter="10" clickable :column-num="4">
      <van-grid-item icon="http://img.zhichiwangluo.com/zcimgdir/album/file_5b56d3e9429cf.png" text="电影" to="/movie"/>
      <van-grid-item icon="http://img.weiye.me/zcimgdir/album/file_58da0e0128d2d.png" text="KTV" to="/ktv"/>
      <van-grid-item icon="http://img.zhichiwangluo.com/zcimgdir/album/file_5b56d3e7caae5.png" text="鲜花" to="/flower"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5b8e2d783bba7.png " text="家具装修"
                     url="https://github.com"/>
    </van-grid>
  </div>
  <div>
    <van-grid gutter="10" clickable :column-num="4">
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd2659983eb2.png" text="洗浴汗蒸" to="/bath"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd26598d5981.png" text="拍照" to="/photo"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd26597cbeed.png" text="写真" to="/portrait"/>
      <van-grid-item icon="https://img.zhichiwangluo.com/zcimgdir/album/file_5dd265973d9d2.png  " text="限时秒杀"
                     url="/limitbuy"/>
    </van-grid>
  </div>
  <div>
    <van-divider/>
  </div>

  <div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images1" :key="image">
        <img class="imgs2" :src="image"/>
      </van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <van-divider/>
  </div>
  <div>
    <van-row>
      <van-col span="24" style="font-size: 20px;padding: 8px; text-align: center">吃 喝 玩 乐</van-col>
    </van-row>
  </div>
  <!--  商品卡片-->
  <div>
    <van-row gutter="20">
      <van-col span="8" >
        <van-card


            thumb="https://p0.meituan.net/biztone/a5dbed3f066a9b9764edee498e686e261058771.jpg%40340w_192h_1e_1l%7Cwatermark%3D0"
            thumb-link="http://localhost:8081/foodView"
        />
      </van-col>
      <van-col span="8" style="--van-empty-image-size:6px">
        <van-card

            title="商品标题"
            thumb="https://p0.meituan.net/dpmerchantpic/38726d4d492b56b35bd5c1cbe6371bb92026093.png%40340w_192h_1e_1l%7Cwatermark%3D0"
            thumb-link="http://localhost:8081/play"
        />
      </van-col>
      <van-col span="8">
        <van-card

            title="商品标题"
            thumb="https://qcloud.dpfile.com/pc/GrQwGswgUnth9oIbUgiWShtIz9dxOxIf64kNqtEnE3HVjkQfaSBsnmqgRlHML-8OkkCBOWO5rApRy3gE6VS0Vg.jpg"
            thumb-link="http://localhost:8081/foodView"
        />
      </van-col>
    </van-row>
  </div>
<div>
  <div>
    <van-row>
      <van-col span="24" style="font-size: 20px;padding: 8px; text-align: center"></van-col>
    </van-row>
  </div>
  <div>
    <van-row gutter="20">
      <van-col span="8">
        <van-card

            title="美食"
            thumb="https://p1.meituan.net/mobilem/22283deca7863eae13b1a1052d1625a9343040.png"
            thumb-link="http://localhost:8081/photo"
        />
      </van-col>
      <van-col span="8">
        <van-card
            title="商品标题"
            thumb="https://qcloud.dpfile.com/pc/tVy_RjqQVF-HvpZjO_DHUsG6qs9W8_jRaas0PLfr3uHBhYFoCLCcW1rmpi0c_fMXkkCBOWO5rApRy3gE6VS0Vg.jpg"
            thumb-link="http://localhost:8081/portrai"
        />
      </van-col>
      <van-col span="8">
        <van-card

            title="商品标题"
            thumb="https://p0.meituan.net/merchantpic/e948e4331276890e07d9e142f089b30a838262.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0"
            thumb-link="http://localhost:8081/portrait"
        />
      </van-col>
    </van-row>
</div>
  </div>
  <div>
    <h5>©2003-2022 dianping.com, All Rights Reserved. </h5>
  </div>

</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      images: [

        'https://img.meituan.net/phoenix/620e8e2f9929a2ecda505ea112a46d231460733.jpg@1920w_1080h',
        'https://p0.meituan.net/dpmerchantpic/d7f1803442a43c0f9b99086d3c70ba9c576778.png%401000w_1000h_0e_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20%7Cformat%3Djpeg',
        'http://p0.meituan.net/dpmerchantpic/7f1737b3e0a55b61f41dd78d28e9473d1953093.jpg%40340w_255h_1e_1c_1l%7Cwatermark%3D0',
      ],
      images1: [
        'https://p0.meituan.net/dpmerchantpic/c5ae8445d21d623fb1e6e3b109a86f421926695.jpg%40120w_90h_1e_1c_1l_80q%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20'
      ],

    }
  }
}
</script>

<style scoped>

.imgs1 {
  width: 100%;
  height: 14rem;
}
.imgs2 {
  width: 90%;
  height: 5rem;
}

</style>